<template>
	<a-card title="Reservation Information" :loading="loading">
		<a-descriptions :column="2" bordered>
			<a-descriptions-item label="Guest Name">
				{{ data?.guestName }}
			</a-descriptions-item>
			<a-descriptions-item label="Guest contact Info">
				{{ data?.contactInfo }}
			</a-descriptions-item>
			<a-descriptions-item label="Expected arrival time">
				{{ formatDate(data?.arrivalTime + '') }}
			</a-descriptions-item>
			<a-descriptions-item label="Reserved table size info">
				{{ data?.reservedSize }}
			</a-descriptions-item>
			<a-descriptions-item label="Status of the reservation">
				{{ data?.status }}
			</a-descriptions-item>
		</a-descriptions>
	</a-card>
</template>

<script setup lang="ts">
import { dateFormat } from '@/types/meta';
import { Reservation } from '@/types/reservation';
import * as dayjs from 'dayjs';
import { Dayjs } from 'dayjs';

interface Props {
	data?: Reservation;
	loading: boolean;
}

defineProps<Props>();

const formatDate = (date: Date | string | Dayjs) => dayjs(date).format(dateFormat);
</script>

<style scoped></style>
